<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <select name="field_name" lay-verify="required" required>
                            <option value="name">菜单名称</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <input name="field_value" class="layui-input" placeholder="输入搜索内容"/>
                    </div>
                    <div class="layui-inline">&emsp;
                        <button class="layui-btn icon-btn" lay-filter="search" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="test"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="saveDialog">
    <form id="saveForm" lay-filter="saveForm" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">上级菜单</label>
                <div class="layui-input-block">
                    <div id="saveParentSel" class="ew-xmselect-tree"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">菜单名称</label>
                <div class="layui-input-block">
                    <input name="name" placeholder="请输入菜单名称" class="layui-input"
                           lay-verType="tips" lay-verify="required" autocomplete="off" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">权限类型</label>
                <div class="layui-input-block">
                    <input name="type" type="radio" value="0" title="菜单" checked/>
                    <input name="type" type="radio" value="1" title="按钮"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">显示状态</label>
                <div class="layui-input-block">
                    <input name="is_show" type="radio" value="1" title="显示" checked/>
                    <input name="is_show" class="layui-hide" type="radio" value="0" title="隐藏"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单图标</label>
                <div class="layui-input-block">
                    <input name="icon" placeholder="请输入菜单图标" autocomplete="off" class="layui-input"/>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">模块</label>
                <div class="layui-input-block">
                    <input name="m" placeholder="请输入模块名" autocomplete="off" value="backend" class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">控制器</label>
                <div class="layui-input-block">
                    <input name="c" placeholder="请输入控制器名" autocomplete="off" class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">方法</label>
                <div class="layui-input-block">
                    <input name="a" placeholder="请输入方法名" autocomplete="off" class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">排序号</label>
                <div class="layui-input-block">
                    <input name="sort" placeholder="请输入排序号" type="number" class="layui-input"
                           lay-verType="tips" lay-verify="required|number" value="0" required/>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="saveSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>

<!-- js部分 -->
<script type="text/javascript" src="__TPL_RESOURCE_BACKEND__/libs/layui/layui.js"></script>
<script type="text/javascript" src="__TPL_RESOURCE_BACKEND__/js/common.js"></script>
<script>
    layui.use(['layer', 'form', 'admin', 'treeTable', 'util', 'xmSelect'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var treeTable = layui.treeTable;
        var xmSelect = layui.xmSelect;

        //渲染表格
        var insTb = treeTable.render({
            elem: '#test',
            url: "{{:url('Menu/index')}}",
            method: 'post',
            contentType: 'application/json',
            toolbar: ['<p>',
                '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                '</p>'].join(''),
            tree: {
                iconIndex: 0,
                idName: 'id',
                pidName: 'parent_id',
                isPidData: true
            },
            cols: [[
                {field: 'name', title: '菜单名称', width: 150},
                {title: '菜单图标', templet: '<p><i class="layui-icon {{d.icon}}"></i></p>', align: 'center', width: 80},
                {
                    title: '菜单链接', templet: function (d) {
                        if (d.type == 0 && d.parent_id > 0) {
                            return '<p>' + d.m + '/' + d.c + '<p>';
                        }
                    }
                },
                {
                    title: '权限标识', templet: function (d) {
                        if (d.type == 1) {
                            return '<p>' + d.c + ':' + d.a + '<p>';
                        }
                    }
                },
                {field: 'sort', title: '排序号', align: 'center',width:80},
                {
                    title: '显示状态', templet: function (d) {
                        return [
                            '<span style="color: #C2C2C2;">隐藏</span>',
                            '<span style="color: #5FB878;">显示</span>'
                        ][d.is_show];
                    }, align: 'center', width: 100
                },
                {
                    title: '类型', templet: function (d) {
                        return [
                            '<span class="layui-badge layui-badge-green">菜单</span>',
                            '<span class="layui-badge layui-badge-gray">按钮</span>'
                        ][d.type];
                    }, align: 'center', width: 80
                },
                {title: '创建时间', field: 'created_at', align: 'center',width:180},
                {title: '操作', toolbar: '#barDemo', align: 'center', width: 120}
            ]]
        });

        /* 表格搜索 */
        form.on('submit(search)', function (data) {
            insTb.reload({where: data.field});
            return false;
        });

        /* 表格操作列点击事件 */
        treeTable.on('tool(test)', function (obj) {
            if (obj.event === 'edit') { // 修改
                showSaveModel(obj.data);
            } else if (obj.event === 'del') { // 删除
                doDel(obj);
            }
        });

        /* 表格头工具栏点击事件 */
        treeTable.on('toolbar(test)', function (obj) {
            if (obj.event === 'add') { // 添加
                showSaveModel();
            }
        });

        /* 显示表单弹窗 */
        function showSaveModel(mData) {
            admin.open({
                type: 1,
                area: ['640px', '400px'],
                maxmin: true,
                resize: true,
                title: (mData ? '修改' : '添加') + '菜单',
                content: $('#saveDialog').html(),
                success: function (layero, dIndex) {
                    // 回显表单数据
                    form.val('saveForm', mData);
                    var url = mData ? "{{:url('Menu/edit')}}" : "{{:url('Menu/add')}}";

                    // 表单提交事件
                    form.on('submit(saveSubmit)', function (data) {
                        data.field.parent_id = insXmSel.getValue('valueStr');
                        var loading = layer.load(3);
                        $.ajax({
                            url: url,
                            type: 'post',
                            data: data.field,
                            success: function (res) {
                                if (res.code != 0) {
                                    layer.msg(res.msg, {icon: 5,time:1000});
                                } else {
                                    layer.close(dIndex);
                                    layer.msg(res.msg, {icon: 1,time:1500});
                                    insTb.refresh();
                                }
                                layer.close(loading);
                            }, error: function () {
                                layer.msg('网络错误请稍后重试', {icon: 5,time:1000});
                                layer.close(loading);
                            }
                        });
                        return false;
                    });
                    // 渲染下拉树
                    var insXmSel = xmSelect.render({
                        el: '#saveParentSel',
                        height: '250px',
                        data: insTb.options.data,
                        initValue: mData ? [mData.parent_id] : [],
                        model: {label: {type: 'text'}},
                        prop: {
                            name: 'name',
                            value: 'id'
                        },
                        radio: true,
                        clickClose: true,
                        tree: {
                            show: true,
                            indent: 15,
                            strict: false,
                            expandedKeys: true
                        }
                    });
                    //弹窗不出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                }
            });
        }

        /* 删除 */
        function doDel(obj) {
            layer.confirm('确定要删除选中数据吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loading = layer.load(3);
                $.ajax({
                    url: "{{:url('Menu/del')}}",
                    type: 'post',
                    data: {id: obj.data.id},
                    success: function (res) {
                        if (res.code != 0) {
                            layer.msg(res.msg, {icon: 5,time:1000});
                        } else {
                            layer.msg(res.msg, {icon: 1,time:1500});
                            insTb.reload();
                        }
                        layer.close(loading);
                    }, error: function () {
                        layer.close(loading);
                        layer.msg('网络错误请稍后重试', {icon: 5,time:1000});
                    }
                });
                return false;
            });
        }
    });
</script>
</body>
</html>
